<template>
  <van-pull-refresh
  v-if="articleList.length > 0"
  class="blog-m-articles"
    :head-height="60"
    :pull-distance="60"
    v-model="refreshing"
    @refresh="onRefresh"

  >
    <van-list
      v-model="loading"
      :finished="finished"
      loading-text="加载中"
      finished-text="没有更多了"
      offset="50"
      @load="onLoad"
    >
      <router-link
        :to="{ name: 'mArticle', params: { id: article.id } }"
        v-for="(article, index) in articleList"
        :key="index"
      >
       <MArticleItem :article="article"/>
      </router-link>
    </van-list>
  </van-pull-refresh>
</template>

<script>
// import MArticle from "./MArticle";

/*
  下拉刷新, 上拉加载
  实现方法: 上拉时, 到达目标offset, 触发load事件, http发起getArticle请求, 请求完成后, loadding结束, finish完成, 添加到articleList中,
  下拉刷新, 到顶部出现下拉刷新, 触发refish事件, 将refishing(状态)变为false  重置page, 重置artcileList, 然后再次发起load的请求, 把loadding改为true


  如何实现缓存效果
  第一次到columnId, 发起请求, 存入对象中, 之后再次获取就push到里面, 
  每次切换到columnId时先看缓存对象是否存在, 如果存在, 就使用, 不存在就不使用
*/
import MArticleItem from '@/components/m/MArticleItem';
import QS from 'qs'
window.time = null
export default {
  name: "VueEleMArticles",
  components: {MArticleItem},
  data() {
    return {
      page: 1,
      size: 6,
      loading: false,
      finished: false,
      articleList: [],
      refreshing: false,
      q: undefined,
      cacheColumnList: {}
    };
  },
  props: {
    columnId: {
      type: String,
    }
  },
  created() {
    // 一开始添加6条数据, 之后加载加3条
    this.getArticles()
  },
  mounted() {
    this.$bus.$on('search-article', this.searchArticle)
  },
  watch: {
    columnId() {
      this.page = 1
      this.finished = false
      document.querySelector('.blog-m--container').scroll(0, 0)
      // 这里表示重置加载的意思, 在refresh时, 重置加载, 默认第一次会加载, 事件内部会将loadding变为true
      if (this.cacheColumnList[this.columnId] && Array.isArray(this.cacheColumnList[this.columnId])) {
        this.page = 2
        this.articleList = JSON.parse(JSON.stringify(this.cacheColumnList[this.columnId]));
        clearTimeout(window.time)
        return false;
      }
      this.refreshing = true;
      this.onRefresh();
    }
  },
  methods: {
    searchArticle(q) {
      this.q = q
      this.refreshing = true;
      this.onRefresh()
    },
    onLoad() {
      console.log('load')
      this.getArticles();
    },
    onRefresh() {
      this.page = 1;
      this.finished = false
      // 这里表示重置加载的意思, 在refresh时, 重置加载, 默认第一次会加载, 事件内部会将loadding变为true
      this.loading = true
      this.getArticles();
    },
    getQuery() {
      let query = {};
      // JSON.parse(JSON.stringify)只有undefined才能清除
      query.q = this.q || undefined;
      query.columns = this.columnId || undefined;
      return JSON.parse(JSON.stringify(query));
    },
    getArticles() {
      // 可以将数据依赖设定为对象, 满足条件时改变对象, 最后将整个变量传到目标方法中
      let data = { page: this.page, size: this.size }
      let query = this.getQuery();
      if (Object.entries(query).length > 0) {
        data.query = QS.stringify(query);
      }
      this.$http({ type: "articles",  data})
      .then((result) => {
        if (this.refreshing) {
          this.articleList = [],
          this.refreshing = false
        }
        let data = result.data;
        if (this.articleList.length >= data.total) {
          // 这个状态控制整个加载, 如果finished为true, 就不会触发load事件
          this.finished = true;
        }
        this.articleList.push(...result.data.list)
        this.page++
        this.loading = false;
        this.cacheColumn()
      })
      .catch((err) => console.log(err));
    },
    cacheColumn() {
      if (!this.columnId) {
          return false;
        }
        // 如果缓存中的type存在, 就concat添加数据, 如果不存在, 就直接赋值存储, 这里可以不用这样使用, 直接缓存第一内容就行, 后面的通过刷新就行
        let columnTypeList = this.cacheColumnList[this.columnId]
        columnTypeList && Array.isArray(columnTypeList) || (this.cacheColumnList[this.columnId] = JSON.parse(JSON.stringify(this.articleList)))
        //  columnTypeList && Array.isArray(columnTypeList) ? columnTypeList.concat(result.data.list) : columnTypeList = result.data.list
    }
  },
};
</script>
<style lang="stylus" >
// .blog-m-articles
//   overflow hidden
//   overflow-y auto
//   // 要想让子元素出现滚动条, 就需要固定高度, 可以给最顶层的内容设置overflow auto, 里面能容超过了它, 就会出现滚动条
// 只要子元素高于父元素高度, 使用overflow: auto, 就会出现滚动条
//   height calc(100vh - 105px)
    

</style>